<template>
    <div>
        <el-drawer class="reset" v-model="showDrawer" size="462px">
            <div class="head-box">
                <div class="flex flex-jc-sb">
                    <div class="mg-t-28">
                        <div class="fs-20 bold">{{ itemDetail.serveCompanyName }}</div>
                        <!-- <div class="fs-14 mg-t-5">负责人：{{ itemDetail.name || '佚名' }}</div> -->
                    </div>
                    <img class="icon-bg1" src="../../../assets/image/approval/bg-1.png" alt="">
                </div>
                <div v-if="itemDetail.remark" class="hint-box flex items-center">
                    <img class="icon-hint" src="../../../assets/image/approval/icon-hint.png" alt="">
                    <div class="fc-grey fs-14">特别约定：{{ itemDetail.remark }}</div>
                </div>
                <el-icon class="icon-close pointer" @click="onCloseDrawer"><Close /></el-icon>
            </div>
            <div class="item-box mg-t-8">
                <OccupationCard :list-data="itemDetail.occupationList || []" show-video :serve-company-id="itemDetail.id" :video-list="itemDetail.fileDetails"  @success="onHandleSuccess" @addVideo="onShowAddVideo"/>
                <!-- <OccupationCard :list-data="itemDetail.occupationList || []" show-video :video-list="itemDetail.fileDetailList"/> -->
            </div>
            <div class="video-container">
                <div class="fs-16 bold mg-t-28 mg-b-10">申请记录</div>
                <template v-for="(i, index) in recordList" :key="index">
                    <ApplyItem class="mg-b-10" :item-data="i" :show-button="index === 0" @reject="onHandleReject" @confirm="onHandleConfirm"/>
                </template>
            </div>
            <template #footer>
                <div class="footer-box flex items-center flex-jc-sb">
                    <el-button v-if="itemDetail.status === 3" class="flex-1" type="danger" @click="onCancelRefuse">取消拒保</el-button>
                    <el-button v-else class="flex-1" type="danger" @click="onShowRefuse">拒保</el-button>
                    <el-button class="flex-1" type="primary" @click="onShowOccupation">添加工种</el-button>
                    <el-button class="flex-1" type="primary" @click="onShowAddVideo">添加视频</el-button>
                </div>
            </template>
        </el-drawer>
        <DialogUploadVideoLong v-model:show="showVideo" :item-detail="itemDetail" @success="onHandleSuccess"/>
        <DialogAddOccupation v-model:show="showAddOccupation" :from="occupationFrom" :item-detail="detailData" @success="onHandleSuccess"/>
        <DialogReject v-model:show="showReject" :reject-type="rejectType" :item-detail="recordList[0]" @success="onHandleSuccess"/>
        <DialogRefuse v-model:show="showRefuse" :item-detail="itemDetail" @success="onHandleSuccess"/>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { cloneDeep } from 'lodash'
import DialogUploadVideoLong from './DialogUploadVideoLong.vue'
import OccupationCard from './OccupationCard.vue'
import DialogAddOccupation from './DialogAddOccupation.vue'
import ApplyItem from './ApplyItem.vue'
import DialogReject from './DialogReject.vue'
import DialogRefuse from './DialogRefuse.vue'
import { getcompanyDetailById } from '@/api/api'
import { getOccupationList } from '@/api/longInsure/index.ts'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    id: {
        type: Number
    },
    // itemDetail: {
    //     type: Object,
    //     default (){
    //         return {}
    //     }
    // }
})

const emits = defineEmits(['update:show', 'success'])

const showDrawer = ref(false)
const showAddOccupation = ref(false)
const showReject = ref(false)
const showRefuse = ref(false)
const detailData = ref({})
const showVideo = ref(false)
const occupationFrom = ref('add')

const itemDetail = ref({}) as any
const getData = async () => {
    const res = await getcompanyDetailById(props.id)
    itemDetail.value = res
    recordList.value = []
    if (res.status === 0 || (res.status === 1 && !res.occupationRecord)) {
        recordList.value.push({
            id: res.id,
            createTime: res.createTime,
            rejectRemark: res.rejectRemark,
            fileDetails: res.fileDetails,
            fileDetailList: res.fileDetailList,
            createUserName: res.createUserName,
            status: res.status,
            occupationList: res.occupationList
        })
    } else {
        await getRecordList()
    }
}

const recordList = ref([]) as any

const getRecordList = async () => {
    const res = await getOccupationList({
        periodServeCompanyId: itemDetail.value.id,
        isDelete: 0
    })
    recordList.value = res || []
}

const rejectType = computed(() => {
    return itemDetail.value.status === 0 ? 'add' : 'apply'
})

const onHandleSuccess = async () => {
    await getData()
    // await getRecordList()
    onHandleRefresh()
}
/**
 * 点击添加视频按钮
 */
const onShowAddVideo = () => {
    showVideo.value = true
}
/**
 * 操作完成后刷新操作
 */
const onHandleRefresh = () => {
    emits('success')
}
/**
 * 点击添加工种按钮
 */
const onShowOccupation = () => {
    occupationFrom.value = 'add'
    detailData.value = cloneDeep(itemDetail.value)
    showAddOccupation.value = true
}
/**
 * 驳回最新申请
 * @param item 
 */
const onHandleReject = (item: any) => {
    showReject.value = true
}
/**
 * 通过最新申请
 * @param item 
 */
const onHandleConfirm = (item: any) => {
    occupationFrom.value = itemDetail.value.status === 0 ? 'edit' : 'apply'
    showAddOccupation.value = true
    detailData.value = cloneDeep(itemDetail.value)
    // detailData.value = {}
}
/**
 * 点击拒保按钮
 */
const onShowRefuse = () => {
    showRefuse.value = true
}
/**
 * 点击取消拒保按钮
 */
const onCancelRefuse = () => {
    detailData.value = cloneDeep(itemDetail.value)
    occupationFrom.value = 'cancelRefuse'
    showAddOccupation.value = true
}
/**
 * 关闭
 */
const onCloseDrawer = () => {
    showDrawer.value = false
    onHandleRefresh()
}

watch(() => props.show, (newval) => {
    showDrawer.value = newval
})

watch(showDrawer, async (newval) => {
    emits('update:show', newval)
    if (newval) {
        await getData()
    }
}) 

</script>
<style lang="scss" scoped>
:deep(.reset .el-drawer__header) {
    display: none !important;
}

:deep(.reset .el-drawer__body) {
    padding: 0 !important;
}
:deep(.el-drawer__footer) {
    box-shadow: 0px -5px 11px 0px rgba(0, 0, 0, 0.05);
    padding-top: 16px;
}
.head-box {
    width: 100%;
    height: 130px;
    background: url('../../../assets/image/approval/bg.png') no-repeat 100% 0;
    padding: 0 24px;
    position: relative;

    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 20px;
        background: linear-gradient(transparent 0%, #fff);
        left: 0;
        bottom: 0;
    }
}

.icon-bg1 {
    width: 123px;
    height: 123px;
}

.icon-hint {
    width: 18px;
    height: 18px;
}

.hint-box {
    background: #F0F7FF;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: -30px;
}

.item-box {
    position: relative;
    padding: 0 24px;
}
.video-container {
    padding: 0 24px;
}
.icon-close {
    position: absolute;
    font-size: 20px;
    top: 20px;
    right: 20px;
}
</style>